<!-- 优惠券 -->
<template>
    <div>

        <div>
            <span>优惠券名称：</span>
            <Input placeholder="请输入优惠券名称" style="width: 200px; margin-left: 10px;" v-model="search.coupon_name"></Input>
            <Button type="primary" icon="ios-search" style="margin-left: 10px;" @click="getList">搜索</Button>
            <Button @click="reset" icon="ios-refresh" style="margin-left: 10px;">重置</Button>
            <Button type="info" @click="editCoupon(false, false)" style="margin-left: 10px;">添加</Button>
        </div>
        <br>
        <Table :columns="columns" :data="list" ref="selection" @on-sort-change="customSort" :highlight-row="true"
            max-height="800" border stripe @on-selection-change="tableSelect" size="small">
            <template slot-scope="{ row , index}" slot="sendTime">
                <div>开始时间：{{ row.start_time }}</div>
                <div>结束时间：{{ row.end_time }}</div>
            </template>
            <template slot-scope="{ row , index}" slot="useLimit">
                <span v-if="row.less_amount == 0">无门槛</span>
                <span v-else>满{{ row.less_amount }}元可用</span>
            </template>
            <template slot-scope="{ row , index}" slot="sendInfo">
                <div style="text-align: left;">
                    <div>发放总量:{{ row.send_num == 0 ? '不限量' : row.send_num }}</div>
                    <div>已发放：{{ row.have_send_num }}</div>
                    <div>待发放:{{ row.send_num == 0 ? '不限量' : row.residue_num }}</div>
                </div>
            </template>
            <template slot-scope="{ row , index}" slot="useTime">
                <div>{{ row.use_end_time }}</div>
            </template>

            <template slot-scope="{ row , index}" slot="makeSlot">
                <Button type="success" size="small" @click="editCoupon(row, false)">编辑</Button>
                <Button type="error" size="small" @click="del(row.id)" style="margin-left: 10px;">删除</Button>
                <Button type="primary" size="small" style="margin-left: 10px;" @click="sendRecord(row.id)">发放记录</Button>
            </template>
        </Table>
        <!-- <br> -->

        <Paginate :total="total" @on-change="changePage" @on-page-size-change="changeSize" :current="search.page">
        </Paginate>
        <!-- 添加优惠券 -->
        <Modal width="40" v-model="datumModal" title="添加优惠券" :mask-closable="false">
            <Form ref="formValidate" :model="formItem" :label-width="100">
                <FormItem label="优惠券名称" prop="coupon_name">
                    <Input v-model="formItem.coupon_name" placeholder="请输入优惠券名称"></Input>
                </FormItem>
                <FormItem label="类型">
                    <RadioGroup v-model="formItem.use_type">
                        <Radio :label="1" border>学车优惠券</Radio>
                        <Radio :label="2" border>验车优惠券</Radio>
                        <Radio :label="3" border>陪驾优惠券</Radio>
                    </RadioGroup>
                </FormItem>
                <FormItem label="优惠金额">
                    <Input v-model="formItem.amount" placeholder="请输入优惠券面额" style="width: 210px;margin-right: 5px;"
                        type="number"></Input>元
                </FormItem>
                <FormItem label="使用截止时间">
                    <DatePicker type="date" format="yyyy-MM-dd" v-model="formItem.use_end_time">
                    </DatePicker>
                </FormItem>
                <FormItem label="领取方式">
                    <RadioGroup v-model="formItem.type">
                        <Radio :label="0" border>直接领取</Radio>
                        <Radio :label="1" border>指定用户</Radio>
                    </RadioGroup>
                </FormItem>
                <FormItem label="用户手机号" v-if="formItem.type == 1">
                    <Input v-model="formItem.mobile"></Input>
                    <Alert type="warning">多个用户使用英文逗号","分隔</Alert>
                </FormItem>
                <FormItem label="状态" v-if="formItem.type == 0">
                    <RadioGroup v-model="formItem.status">
                        <Radio :label="0" border>开启</Radio>
                        <Radio :label="1" border>关闭</Radio>
                    </RadioGroup>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button type="primary" size="large" long @click="editModalOk">确定</Button>
            </div>
        </Modal>

        <!--发放记录-->
        <Modal width="70" v-model="recordModal" title="发放记录" :footer-hide="true">
            <div class="search" style="border-bottom:1px solid #ccc ;padding-bottom: 10px;">
                用户信息:
                <Input placeholder="昵称、手机号码" style="width: 200px; margin-left: 10px;" v-model="sendSearch.search"></Input>
                使用状态：
                <Select style="width:200px" v-model="sendSearch.status">
                    <Option value="">请选择</Option>
                    <Option value="0">未使用</Option>
                    <Option value="1">已使用</Option>
                </Select>
                <Button type="primary" icon="ios-search" style="margin-left: 10px;" @click="getSendList">搜索</Button>
                <Button @click="reset1" type="success" icon="ios-refresh" style="margin-left: 10px;">刷新</Button>
            </div>
            <Table :columns="sendColumns" :data="sendList" border style="margin-top: 10px;">
            </Table>
            <br>
            <Page :total="sendTotal" show-sizer show-total show-elevator @on-change="changePage1"
                @on-page-size-change="changeSize1">
            </Page>
        </Modal>
    </div>
</template>

<script>
import Paginate from "@/components/paginate/paginate.vue";
import { Row } from 'view-design';

//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
    //import引入的组件需要注入到对象中才能使用
    name: "marketingCoupon",
    components: { Row, Paginate },
    data() {
        //这里存放数据
        return {
            total: 0,
            list: [],
            columns: [
                {
                    title: '优惠券名称',
                    align: "center",
                    key: 'coupon_name',
                },
                {
                    title: '类型',
                    align: "center",
                    key: 'use_type',
                    render: (h, param) => {
                        let txt = "";
                        if (param.row.use_type == 1) {
                            txt = '学车优惠券'
                        }
                        if (param.row.use_type == 2) {
                            txt = '验车优惠券'
                        }
                        if (param.row.use_type == 3) {
                            txt = '陪驾优惠券'
                        }
                        return h('div', txt);
                    }
                },
                {
                    title: '金额',
                    align: "center",
                    width: "100",
                    key: 'amount'
                },
                {
                    title: '用券时间',
                    align: "center",
                    key: 'amount',
                    slot: "useTime"
                },
                {
                    title: '发放方式',
                    align: "center",
                    key: 'type',
                    render: (h, param) => {
                        let txt = "";
                        if (param.row.type == 0) {
                            txt = '直接领取'
                        }
                        if (param.row.type == 1) {
                            txt = '后台发放'
                        }
                        return h('div', txt);
                    }
                },
                {
                    title: '状态',
                    align: "center",
                    key: 'status',
                    render: (h, param) => {
                        let txt = "";
                        if (param.row.status == 0) {
                            txt = '开启'
                        }
                        if (param.row.status == 1) {
                            txt = '关闭'
                        }
                        return h('div', txt);
                    }
                },
                {
                    title: '创建时间',
                    align: "center",
                    key: 'create_time',
                },
                {
                    title: '操作',
                    align: "center",
                    slot: 'makeSlot',
                }],
            search: {
                page: 1,
                limit: 10,
            },
            goodsList: [],
            goodsTotal: 0,
            serviceList: [],
            Drawer: false,
            opt_for: [],
            userLoad: false,
            index: '1',
            datumModal: false,
            formItem: {},
            sendType: 0,
            sendGoodsIdArr: [],
            // 领取记录
            recordModal: false,
            sendColumns: [{
                title: '优惠券名称',
                align: "center",
                key: 'coupon_name',
            }, {
                title: '会员头像',
                align: "center",
                key: 'avatar',
                render: (h, param) => {
                    return h("img", {
                        attrs: {
                            src: param.row.avatar
                        },
                        style: {
                            width: '80px',
                            height: '60px'
                        }
                    });
                }
            }, {
                title: '会员昵称',
                align: "center",
                key: 'nick',
            }, {
                title: '手机号',
                align: "center",
                key: 'mobile',
            }, {
                title: '使用状态',
                align: "center",
                key: 'is_used',
                render: (h, param) => {
                    let txt = "未使用";
                    if (param.row.is_used == 1) {
                        txt = "已使用";
                    }
                    return h("div", txt);
                }
            }, {
                title: '领取时间',
                align: "center",
                key: 'create_time',
            }, {
                title: '使用时间',
                align: "center",
                key: 'use_time',
                render: (h, param) => {
                    let txt = "";
                    if (param.row.use_time) {
                        txt = param.row.use_time;
                    }
                    return h("div", txt);
                }
            }],
            sendTotal: 0,
            sendList: [],
            sendSearch: {
                id: 0,
                is_used: "",
                search: "",
                page: 1,
                limit: 10
            },
            tableSelectIdArr: [],
        }
    },
    //计算属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {

    },
    //方法集合
    methods: {
        // 查询优惠卷
        getList() {
            this.$axios('/admin/coupon/getList', this.search).then(res => {
                this.list = res.data;
                this.total = res.total;
            });
        },
        reset() {
            this.search = {
                page: 1,
                limit: 10,
            };
            this.getList();
        },
        changePage(page) {
            this.search.page = page;
            this.getList();
        },
        changeSize(size) {
            this.search.limit = size;
            this.getList();
        },
        customSort(column, key, order) {
            this.searchData.order_by = column.key;
            this.searchData.sort = column.order;
            this.getList();
        },
        tableSelect(selection) {
            let arr = [];
            selection.forEach(item => {
                arr.push(item.id);
            });
            this.tableSelectIdArr = arr;
        },
        // 添加优惠券
        editCoupon(row) {
            if (row) {
                this.formItem = { ...row };
            } else {
                this.formItem = {
                    type: 0,
                    use_type: 1,
                    status: 0
                };
            }
            this.datumModal = true;
        },
        editModalOk() {
            this.$axios('/admin/coupon/save', this.formItem).then(res => {
                this.datumModal = false;
                this.getList();
            });
        },
        // 发放记录
        sendRecord(id) {
            this.sendSearch.id = id;
            this.recordModal = true;
            this.getSendList();
        },
        getSendList() {
            this.$axios('/admin/coupon/record', this.sendSearch).then(res => {
                this.sendList = res.data;
                this.sendTotal = res.total;
            });
        },
        reset1() {
            this.sendSearch.page = 1;
            this.sendSearch.limit = 10;
            this.sendSearch.search = "";
            this.sendSearch.status = "";
            this.getSendList();
        },
        changePage1(page) {
            this.sendSearch.page = page;
            this.getSendList();
        },
        changeSize1(size) {
            this.sendSearch.limit = size;
            this.getSendList();
        },
        del(id) {
            this.$Modal.confirm({
                title: '删除',
                content: '<div color="red">您确定要删除吗？</div>',
                onOk: () => {
                    this.$axios('/admin/coupon/del',{id:id}).then(res => {
                        this.$Message.success('执行成功');
                        this.getList();
                    });
                },
                onCancel: () => {
                    this.$Message.info('取消操作');
                }
            });
        }
    },
    created() {
        this.getList();
    },
}
</script>
<style></style>